<template>
	<view class="page">
		<view class="background-view"> </view>

		<view class="userInfo-box" v-if="getIsLogin == true">
			<image class="userImage" :src="getUserinfo.avatar"></image>
			<view class="user-text">
				<view class="view-item text-overflow">{{getUserinfo.nickname}}</view>
				<view class="view-item1 text-overflow signin" @click="signin()">签到</view>
			</view>
			<view class="config flex-center">
				<!-- <image src="@/static/myIcon/config.png"></image> -->
			</view>
		</view>
		<view class="userInfo-box" v-if="getIsLogin == false">
			<image class="userImage" src=""></image>
			<view class="user-text">
				<view @tap="authUser" v-if="getNeedAuth">点击授权用户</view>

				<button open-type="getPhoneNumber" ref="userInfoBtn" v-else
					@getphonenumber="getPhoneNumber">微信手机号一键绑定</button>

			</view>
		</view>
		<view class="user-info-card">
			<view class="item" @click="mypraises">
				<view class="item-2 text-overflow" v-if="getIsLogin">{{userCountList.likesCount}}</view>
				<view class="item-2 text-overflow" v-else>0</view>
				<view class="item-1 text-overflow">获赞</view>
			</view>
			<view class="item" @click="myfans">
				<view class="item-2 text-overflow" v-if="getIsLogin">{{userCountList.followFanCount}}</view>
				<view class="item-2 text-overflow" v-else>0</view>
				<view class="item-1 text-overflow">粉丝</view>
			</view>
			<view class="item" @click="myfollows">
				<view class="item-2 text-overflow" v-if="getIsLogin">{{userCountList.followCount}}</view>
				<view class="item-2 text-overflow" v-else>0</view>
				<view class="item-1 text-overflow">关注</view>
			</view>
		</view>

		<view class="list-box">
			<view class="box">
				<view class="box-title">
					<view class="navTitle" v-for="(item,index) in navList" :key="index">
						<view v-if="getIsLogin" :class="{'active':isActive === index}" @click="checked(index)">
							{{item.title}}
						</view>
						<view v-else>
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="box-content" v-if="getIsLogin && isActive == 0">
					<view class="box-content_article" v-for="item in shareTechnologiesList" :key="item.id">
						<view
							style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
							<view style="display: flex;flex-direction: column;" @click="openPage(item,4)">
								<view class="box-content_article__title">
									<u-tag text="技术分享" type="warning" show="false" mode="dark" shape="circleRight" />
									<text>{{item.title}}</text>
								</view>
								<view class="box-content_article__content">
									<text>{{item.createTime}} </text>
								</view>
							</view>
							<view style="display: flex;flex-direction: row;color: blue;"
								@click="deleteShareDetail(item.id)">删除</view>
						</view>
					</view>
					<view class="box-content_article" v-for="item in windFaultList" :key="item.id">
						<view
							style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
							<view style="display: flex;flex-direction: column;" @click="openPage(item,3)">
								<view class="box-content_article__title">
									<u-tag text="故障消缺" type="warning" show="false" mode="dark" shape="circleRight" />
									<text>{{item.faultName}}</text>
								</view>
								<view class="box-content_article__content">
									<text>{{item.createTime}} </text>
								</view>
							</view>
							<view style="display: flex;flex-direction: row;color: blue;"
								@click.enter="deleteShareDetailFault(item.id)">删除</view>
						</view>
					</view>

				</view>

				<!-- 收藏 -->
				<view class="box-content_collection" v-if="getIsLogin && isActive == 1">
					<view class="" v-for="item in windConFaultList">
						<view class="box-content_collection_view" @click="openPage(item,3)">
							<view class="box-content_collection_content_title">
								<text>{{item.faultName}}</text>
							</view>
							<view class="box-content_collection_content_info">
								<text>{{item.createTime}}</text>
							</view>
						</view>
					</view>
					<view class="" v-for="item in shareConTechnologieList">
						<view class="box-content_collection_view" @click="openPage(item,4)">
							<view class="box-content_collection_content_title">
								<text>{{item.title}}</text>
							</view>
							<view class="box-content_collection_content_info">
								<text>{{item.createTime}}</text>
							</view>
						</view>
					</view>
					<view class="" v-for="item in windConArticleList">
						<view class="box-content_collection_view" @click="openPage(item,1)">
							<view class="box-content_collection_content_title">
								<text>{{item.articleTitle}}</text>
							</view>
							<view class="box-content_collection_content_info">
								<text>{{item.createTime}}</text>
							</view>
						</view>
					</view>
				</view>
				<!--  -->
				<view class="box-content_collection" v-if="getIsLogin && isActive == 2">
					<image class="img" src="@/static/wind/staytunedfor.png"></image>
				</view>
			</view>
		</view>
		<u-tabbar v-model="current" :list="tablist" :beforeSwitch="beforeSwitch" :mid-button="true"></u-tabbar>
		<u-popup v-model="show" mode="bottom">

			<view class="contentBox">
				<!-- <image class="logo" :class="{'active':active}" src="../../static/nav_icon/fenxiang@2x.png"  mode="aspectFit"></image> -->
				<view class="tabbar-box-wrap">
					<view class="tabbar-box">
						<view class="tabbar-box-item" @click="goToPage('/subpackage/technology_share/share_new')">
							<image class="box-image" src="../../static/nav_icon/fenxiang@2x.png" mode="aspectFit">
							</image>
							<text class="explain">技术分享</text>
						</view>
						<view class="tabbar-box-item" @click="goToPage('/subpackage/technology_share/share_new_fault')">
							<image class="box-image" src="../../static/nav_icon/shebeifuwu@2x.png" mode="aspectFit">
							</image>
							<text class="explain">消缺支援</text>
						</view>
						<view class="tabbar-box-item" @click="goToPage('/subpackage/wind/build/build_demand')">
							<image class="box-image" src="../../static/nav_icon/offshore_wind.png" mode="aspectFit">
							</image>
							<text class="explain">建设需求</text>
						</view>
						<view class="tabbar-box-item" @click="goToPage('/subpackage/wind/build/build_service')">
							<image class="box-image" src="../../static/nav_icon/secondarymarket@3x.png"
								mode="aspectFit"></image>
							<text class="explain">设备服务</text>
						</view>
					</view>
					<view class="close_dialog">
						<view class="closeBox" @click="beforeSwitch(2)">
							<u-icon name="close"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>



<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	let WebIM = require("../../utils/WebIM.js")["default"];
	export default {
		data() {
			return {
				userCountList: {},
				articleExamineList: [], // 审核list
				collectionArticleList: [], // 收藏list
				titleList: [{
						id: 0,
						name: '行业动态'
					},
					{
						id: 1,
						name: '招标信息'
					},
					{
						id: 2,
						name: '热门话题'
					},
					{
						id: 3,
						name: '商圈头条'
					},
					{
						id: 4,
						name: '轮播文章'
					},
				],
				tablist: [

					{
						iconPath: "/static/tabbar_icon/home@2x.png",
						selectedIconPath: "/static/tabbar_icon/home-active@2x.png",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/home/home",
					},
					{
						iconPath: "/static/tabbar_icon/topic@2x.png",
						selectedIconPath: "/static/tabbar_icon/topic-active@2x.png",
						text: '话题',
						pagePath: "/pages/topic/topic",
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发布',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "/static/tabbar_icon/message@2x.png",
						selectedIconPath: "/static/tabbar_icon/message-active@2x.png",
						text: '消息',
						customIcon: false,
						isDot: false,
						count: 0,
						pagePath: "/pages/commentsmsg/commentsmsg",
					},
					{
						iconPath: "/static/tabbar_icon/my@2x.png",
						selectedIconPath: "/static/tabbar_icon/my-active@2x.png",
						text: '我的',

						isDot: false,
						customIcon: false,
						pagePath: "/pages/myuser/myuser",
					},
				],
				userInfo: null,
				userFollow: 0,
				userUser: 0,
				isActive: 0,
				navList: [{
					index: 0,
					title: '技术分享'
				}, {
					index: 1,
					title: "收藏"
				}, {
					index: 2,
					title: "我的买卖"
				}],

				shareTechnologiesList: [],
				windFaultList: [],

				windConFaultList: [],
				shareConTechnologieList: [],
				windConArticleList: [],
				show: false,
			};
		},

		onLoad() {

			var that = this;
			this.timer = setInterval(() => {
				if (this.$store.state.isLogin) {
					this.$u.api.getWindCommentsMsgDots({
							userId: this.$store.state.userinfo.id,
						})
						.then(res => {
							if (res.data > 0) {
								that.tablist[3].isDot = true;
								that.tablist[3].count = 1;
							} else {
								that.tablist[3].isDot = false;
								that.tablist[3].count = 0;
							}

						});
				}

			}, 5000);


		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onShow() {
			if (this.getIsLogin) {
				this.userInfo = this.$store.state.userinfo;
				this.getUserInfoListCount();
				this.getCollectionArticleList();
				this.getArticleList();
			}
		},
		computed: {
			...mapGetters(['getUserinfo', 'getNeedAuth', 'getIsLogin', 'getMenu'])
		},
		created() {},
		methods: {
			goToPage(url) {
				if (!url) return;
				uni.navigateTo({
					url
				});
			},
			...mapActions(['login', 'authUserInfo']), //, 'authphoneNumber'
			//  授权用户
			authUser() {

				this.authUserInfo().then((data) => {

					// this.userInfo = this.$store.state.userinfo;
					// this.getUserInfoListCount();
					// this.getCollectionArticleList();
					// this.getArticleList();
				});
			},
			beforeSwitch(index) {
				if (index == 2) {
					this.show = !this.show;
				}
				return true;
			},


			getPhoneNumber(e) {
				this.$store.state.userinfo.iv = e.detail.iv
				this.$store.state.userinfo.encryptedData = e.detail.encryptedData
				this.$store.state.userinfo.openid = uni.getStorageSync('openid')
        console.log(this.$store.state.userinfo,'this.$store.state.userinfo')
				this.$u.api.auth(this.$store.state.userinfo).then(res => {
					if (res.msg == "授权成功") {
						this.$store.state.userinfo = res.data
						this.$store.state.needAuth = false
						this.$store.state.isLogin = true
						this.getUserInfoListCount();
						// this.getCollectionArticleList();
						this.getArticleList();

						//this.imlogin(this.$store.state.userinfo.phoneNumber, this.$store.state.userinfo.nickname);
					} else {
						this.$u.toast("授权失败")
					}
				})
			},
			openPage(item, type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/subpackage/industry_dynamic_detail/industry_dynamic_detail?articleId=' + item
							.articleId
					})
				} else if (type == 3) {
					uni.navigateTo({
						url: '/subpackage/technology_share/shareDetail_fault?shareId=' + item.id
					})

				} else if (type == 4) {
					uni.navigateTo({
						url: '/subpackage/technology_share/shareDetail?shareId=' + item.id
					})

				}

			},

			deleteShareDetailFault(id) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除?',
					success: function(res) {
						if (res.confirm) {
							that.$u.api.deleteShareDetailFault({
									shareId: id,
								})
								.then(res => {
									that.getArticleList();
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			deleteShareDetail(id) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除?',
					success: function(res) {
						if (res.confirm) {
							that.$u.api.deleteShareDetail({
									shareId: id,
								})
								.then(res => {
									that.getArticleList();
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			myfans() {
				if (this.userCountList.followFanCount > 0) {
					uni.navigateTo({
						url: '/subpackage/myfans/myfans'
					})
				}

			},
			myfollows() {
				if (this.userCountList.followCount > 0) {


					uni.navigateTo({
						url: '/subpackage/myfollows/myfollows'
					})
				}
			},
			mypraises() {
				if (this.userCountList.likesCount > 0) {
					uni.navigateTo({
						url: '/subpackage/mypraises/mypraises'
					})
				}

			},

			//  获取用户 点赞，关注，粉丝 数量
			getUserInfoListCount() {
				let params = {
					userId: this.$store.state.userinfo.id
				}
				this.$u.api.getUserInfoListCount(params)
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.userCountList = res.data
					});
			},

			// 获取所有收藏信息
			getCollectionArticleList() {
				let params = {
					userId: this.$store.state.userinfo.id
				}
				this.$u.api.getUserCollectionList(params)
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.windConFaultList = res.data.windFault != undefined ? res.data.windFault : [];
						this.shareConTechnologieList = res.data.shareTechnologies != undefined ? res.data
							.shareTechnologies : [];
						this.windConArticleList = res.data.windArticles != undefined ? res.data.windArticles : [];
						// this.collectionArticleList = res.data.windArticleInfo;
					});
			},
			// 获取 所有 自己发布的文章信息
			getArticleList() {
				let params = {
					userId: this.$store.state.userinfo.id
				}
				this.$u.api.getMyArticleList(params)
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.shareTechnologiesList = res.data.shareTechnologies;
						this.windFaultList = res.data.windFault
						// this.articleExamineList = res.rows
					});
			},
			// 跳转页面
			checked(index) {
				this.isActive = index
				if (index == 1) {
					this.getCollectionArticleList();
				} else if (index == 0) {
					this.getArticleList();
				}
			},

			signin() {

				uni.navigateTo({
					url: '/pages/user_signin/user_signin'
				})


			},
			imlogin(username, nickname) {
				const that = this;
				var options = {
					apiUrl: WebIM.config.apiURL,
					username: username,
					password: username,
					nickname: nickname,
					appKey: WebIM.config.appkey,
					success: function(res) {
						uni.showToast({
							title: "注册成功"
						});
						uni.setStorage({
							key: "myUsername",
							data: username
						});


						getApp().globalData.conn.open({
							apiUrl: WebIM.config.apiURL,
							user: username,
							pwd: username,
							grant_type: "password",
							appKey: WebIM.config.appkey
						});
					},
					error: function(res) {

						if (res.statusCode !== "200") {
							if (res.statusCode == '400' && res.data.error == 'illegal_argument') {
								return;
							}

							uni.setStorage({
								key: "myUsername",
								data: username
							});

							getApp().globalData.conn.open({
								apiUrl: WebIM.config.apiURL,
								user: username,
								pwd: username,
								grant_type: "password",
								appKey: WebIM.config.appkey
							});

						}
					}
				};
				WebIM.conn.registerUser(options);


			},

		},
	};
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;
		background-color: #f2f2f2;
		animation: text linear 0.4s;
	}

	.background-view {
		height: 20%;
		background-color: #3BA2FF;
		border-bottom-left-radius: 30%;
		border-bottom-right-radius: 30%;
	}

	.userInfo-box {
		top: 20rpx;
		position: absolute;
		width: 90%;
		left: 50%;
		transform: translate(-50%, 0);
		padding: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		flex-wrap: wrap;
		height: 150rpx;
		background-color: white;
		box-shadow: 0px 1px 2px #e3e3e3;

		.userImage {
			width: 110rpx;
			height: 130rpx;
			border-radius: 50%;

		}

		.user-text {
			display: flex;
			flex-direction: row;
			width: 70%;
			color: red;
			font-size: 1em;

			.view-item {
				margin-left: 20rpx;
				line-height: 2;
			}

			.view-item1 {
				margin-left: 80rpx;
				line-height: 2;
			}
		}

		.config {
			width: 10%;
			overflow: hidden;
			height: 100%;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.user-info-card {
		top: 15%;
		position: absolute;
		width: 90%;
		left: 50%;
		transform: translate(-50%, 0);
		height: 150rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx;
		background-color: white;
		box-shadow: 0px 1px 2px #e3e3e3;

		.item {
			width: 35%;
			display: flex;
			align-items: center;
			flex-direction: column;
			height: 100%;

			.item-1 {
				font-size: 1.2em;
				width: 100%;
				text-align: center;
			}

			.item-2 {
				text-align: center;
				width: 100%;
				margin-top: 10rpx;
			}
		}
	}

	.text-overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.list-box {
		// height: 380rpx;
		margin-top: 55px;

		// background-color: lightgreen;
		.box {
			background-color: white;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			box-shadow: 0px 1px 2px #e3e3e3;

			.box-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: 2px solid #d8d8d8;


				.navTitle {
					height: 60rpx;
					line-height: 60rpx;
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi;
					color: #333;
				}

				.active {
					position: relative;
					color: #1F75FE;
				}

				.active::after {
					content: "";
					position: absolute;
					width: 100rpx;
					height: 4rpx;
					background-color: #1F75FE;
					left: 0px;
					right: 0px;
					bottom: 0px;
					margin: auto;
				}

				.text1 {
					font-size: 1.3em;
					text-indent: 1em;
				}

				.text2 {
					color: #d8d8d8;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			// 技术分享
			.box-content {
				height: 60%;
				padding: 20rpx 40rpx 40rpx 40rpx;
				display: flex;
				justify-content: start;
				flex-wrap: wrap;

				.box-content_article {
					margin-top: 10rpx;
					width: 100%;
					border-bottom: 1px solid #E5E5E5;

					.box-content_article__title {
						height: 60rpx;
						line-height: 60rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #1A1A1A;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						text {
							margin-left: 5rpx;
							
						}

					}

					// 	//  box 内容
					.box-content_article__content {
						// height: 95rpx;
						line-height: 50rpx;
						text-overflow: -o-ellipsis-lastline;
						letter-spacing: 3rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.box-content_article__bottom {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}

			}

			// 收藏
			.box-content_collection {
				padding: 10rpx 40rpx;
				height: 100%;

				.box-content_collection_view {
					height: 200rpx;
					margin-top: 30rpx;
					border-bottom: 1px solid #CCCCCC;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.box-content_collection_content {
						margin-top: 10rpx;
						height: 140rpx;

						.box-content_collection_content_title {
							height: 60rpx;
							line-height: 60rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #1A1A1A;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							text {
								margin-left: 5rpx;
							}
						}

						.box-content_collection_content_info {
							height: 95rpx;
							line-height: 50rpx;
							text-overflow: -o-ellipsis-lastline;
							letter-spacing: 3rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
				}


				.box-content_collection_content {
					margin-top: 10rpx;
					height: 160rpx;

					.box-content_collection_content_title {
						height: 60rpx;
						line-height: 60rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #1A1A1A;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						text {
							margin-left: 5rpx;
						}
					}

					.box-content_collection_content_info {
						height: 95rpx;
						line-height: 50rpx;
						text-overflow: -o-ellipsis-lastline;
						letter-spacing: 3rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}

		.flex-center {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.signin {
		width: 120rpx;
		border-style: solid;
		border-color: #3BA2FF;
		border-width: 1rpx;
		border-radius: 5rpx;
		text-align: center;
		align-items: center;
		color: #3BA2FF;
	}


	.contentBox {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		transition: opacity 0.3s;
		background: #333333;

		// opacity: 0;
		// &.active {
		// 	opacity: 1;
		// }
		.logo {
			position: relative;
			margin-top: -400upx;
			width: 200upx;
			height: 200upx;
			// z-index: -1;
			opacity: 0;
			transition: opacity 0.3s;

			&.active {
				opacity: 1;
			}
		}
	}

	.tabbar-box-wrap {
		position: absolute;
		width: 100%;
		padding: 50upx;
		box-sizing: border-box;
		bottom: 0;
		left: 0;

		.tabbar-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			display: flex;
			width: 100%;
			// background: #fff;
			// border-radius: 20upx;
			padding: 15upx 20upx;
			box-sizing: border-box;
			z-index: 2;

			// box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
			// &:after {
			// 	content: '';
			// 	position: absolute;
			// 	bottom: -16upx;
			// 	left: 0;
			// 	right: 0;
			// 	margin: auto;
			// 	width: 50upx;
			// 	height: 50upx;
			// 	transform: rotate(45deg);
			// 	background: #fff;
			// 	z-index: 1;
			// 	box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
			// 	border-radius: 2px;
			// }
			// &:before {
			// 	content: '';
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	width: 100%;
			// 	height: 100%;
			// 	background: #ffffff;
			// 	border-radius: 20upx;
			// 	z-index: 2;
			// }
			.tabbar-box-item {
				display: flex;
				align-items: center;
				width: 46vw;
				//justify-content: center;
				// position: relative;
				// width: 100%;
				z-index: 3;
				margin: 40upx auto;
				color: $uni-color-subtitle;
				text-align: center;
				font-size: 100vw;
				justify-content: space-around;

				.box-image {
					width: 15vw;
					height: 15vw;
				}

				.explain {
					color: #FFFFFF;
					font-size: 7vw;
				}
			}
		}
	}

	.close_dialog {
		height: 100rpx;
		display: flex;
		justify-content: center;
		margin-top: 40rpx;

		.closeBox {
			background: #FFFFFF;
			margin: auto;
			border-radius: 50%;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			width: 100rpx;

		}
	}
</style>
